<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/DOM练习.css">
</head>
<body>
    <div class="box">
        <div class="title">
            <span class="active">列表1</span>
            <span>列表2</span>
            <span>列表3</span>
            <span>列表4</span>
        </div>
        <div class="con">
            <div class="show">列表1内容</div>
            <div>列表22内容</div>
            <div>列表333内容</div>
            <div>列表4444内容</div>
        </div>
        <script>
            var title=document.querySelectorAll('.title span')
            var con=document.querySelectorAll('.con div')
            title.forEach(function(span,i){
                span.onclick=function(){
                    document.querySelector(".active").classList.remove("active")
                    document.querySelector(".show").classList.remove("show")
                    span.classList.add("active")
                    con[i].classList.add("show")
                }
            })
        </script>
    </div>
</body>
</html>